<template>
  <div class="loading"
       :style="emptyStyle">

    <!-- v-on:click.prevent -->
    <div class="loading-content"
         :style="comtentStyle">

      <img :src="emptyImgSrc"
           :style="imgSize"
           alt="emptyimg">

      <span class="loading-content-text"
            :style="emptyDescStylu"
            v-if="type === 'all' || type === 'text'">{{emptyDesc}}</span>

      <div class="loading-content-btn"
           v-if="type === 'all' || type === 'button'"
           @click.stop="retry()">{{emptyBtnDesc}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'loading',
  data () {
    return {
      visible: false
    }
  },
  props: {
    type: {
      type: String,
      default: 'text'
    },
    emptyBtnDesc: {
      type: String,
      default: '重新加载'
    },
    imgWidth: {
      type: Number,
      default: 301
    },
    imgHeight: {
      type: Number,
      default: 241
    },
    top: {
      type: Number,
      default: 0
    },
    left: {
      type: Number,
      default: 0
    },
    right: {
      type: Number,
      default: 0
    },
    bottom: {
      type: Number,
      default: 0
    },
    translateY: {
      type: Number,
      default: 100
    },
    /**
       * 自定义背景颜色，默认为white
       */
    emptybgcolor: {
      type: String,
      default: 'rgba(255,255,255,1)'
    },
    emptyImg: {
      type: String,
      default: 'loading.gif'
    },
    emptyDescColor: {
      type: String,
      default: 'rgba(255, 176, 173, 1)'
    },
    emptyDesc: {
      type: String,
      default: '页面正在赶来,么么哒'
    },
    zIndex: {
      type: Number,
      default: 290
    }
  },
  computed: {
    imgSize () {
      return {
        width: this.px2rem(this.imgWidth),
        height: this.px2rem(this.imgHeight)
      }
    },
    emptyDescStylu () {
      return {
        color: this.emptyDescColor
      }
    },
    emptyStyle: function () {
      let self = this
      let cls = {
        top: self.px2rem(self.top),
        left: self.px2rem(self.left),
        right: self.px2rem(self.right),
        bottom: self.px2rem(self.bottom),
        background: self.emptybgcolor,
        zIndex: self.zIndex
      }
      return cls
    },
    comtentStyle: function () {
      let self = this
      let cls = {
        transform: 'translateY(' + '-' + self.px2rem(self.translateY) + ')'
      }
      return cls
    },
    emptyImgSrc: function () {
      return require(`@image/${this.emptyImg}`)
    }
  },
  methods: {
    px2rem (px) {
      let rem = 100
      return `${px / rem}rem`
    },
    retry () {
      this.$emit('subClick')
    }
  },
  watch: {
  }
}
</script>


<style lang="stylus">
.loading {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;

  .loading-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .loading-content-text {
      font-size: 28px;
    }

    .loading-content-btn {
      border-radius: 10px;
      border: 1px solid rgba(251, 215, 213, 1);
      font-size: 28px;
      color: rgba(255, 176, 173, 1);
      padding: 10px 41px 10px 41px;
      margin-top: 28px;
    }

    img {
      width: 150px;
      height: 150px;
    }

    span {
      margin-top: 30px;
      margin-left: 30px;
      margin-right: 30px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      color: #999999;
      line-height: 40px;
      text-align: center;
    }
  }
}
</style>
